<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html {
            width: 3000px;
            height: 5000px;
        }
    </style>
</head>

<body>

</body>
<script>
    // window.innerWidth   window.innerHeight  浏览器的可视宽高 (文档宽高 + 滚动条)

    // 文档的可视宽高 (可视区域 => 一屏宽高)  (文档宽高 -> 不包含滚动条)
    // document.documentElement.clientWidth    => html的可视宽度
    // document.documentElement.clientHeight   => html的可视高度


    // 文档的实际宽高 (html页面在文档中实际占据的位置)
    // document.documentElement.scrollWidth    => html的实际宽度
    // document.documentElement.scrollHeight   => html的实际高度


    // resizeHandler();
    // window.onresize = resizeHandler;
    // function resizeHandler() {
    //     // console.log("浏览器的可视宽高", window.innerWidth, window.innerHeight);
    //     // console.log("文档的可视宽高", document.documentElement.clientWidth, document.documentElement.clientHeight);

    //     console.log("文档的实际宽高", document.documentElement.scrollWidth, document.documentElement.scrollHeight);
    // }


    // 滚动条的位置 (html页面向左/向上滚动距离)
    // document.documentElement.scrollLeft    => 滚动条相较于文档左边的位置
    // document.documentElement.scrollTop     => 滚动条相较于文档顶部的位置

    scrollHandler();
    window.onscroll = scrollHandler;

    function scrollHandler() {
        console.log("滚动条的位置", document.documentElement.scrollLeft, document.documentElement.scrollTop);
    }


</script>

</html>